<div class="ama-user-menu">
    <div  class="ama-user-menu-initials">
        <button mat-button [matMenuTriggerFor]="menu" class="ama-user-initials">
            <div [outerHTML]="userDetails |  usernameInitials"></div>
        </button>
    </div>

    <mat-menu #menu="matMenu" xPosition="before">

        <div mat-menu-item class="ama-user-menu-initials ama-details">
            <button class="ama-user-initials ama-details">
                <div [outerHTML]="userDetails |  usernameInitials"></div>
            </button>
            <div class="ama-user-name-mail">
                <div class="ama-user-menu-name">{{ userName }}</div>
                <div class="ama-user-menu-name">{{ userMail }}</div>
            </div>
        </div>

        <mat-divider></mat-divider>

        <button mat-menu-item [matMenuTriggerFor]="langMenu" data-automation-id="user-language-menu">
            <mat-icon>translate</mat-icon>
            <span>{{ 'APP.HEADER.LANGUAGE' | translate }}</span>
        </button>
    
        <mat-menu #langMenu="matMenu">
            <adf-language-menu></adf-language-menu>
        </mat-menu>

        <button mat-menu-item data-automation-id="about" (click)="navigateToAbout()">
            <mat-icon>info</mat-icon>
            <span>{{ 'APP.HEADER.ABOUT' | translate }}</span>
        </button>

        <button mat-menu-item data-automation-id="ama-user-menu-logout" adf-logout [enableRedirect]="false">
            <mat-icon>exit_to_app</mat-icon>
            <span>{{ 'APP.HEADER.SIGN_OUT' | translate }}</span>
        </button>
        <mat-divider></mat-divider>

        <a *ngIf="isUserAdmin()" mat-menu-item class="ama-user-menu-admin" (click)="openAdminApp()">
            <mat-icon svgIcon="admin"></mat-icon> 
            <span>{{ 'NEW_STUDIO_DASHBOARD.USER_INFO_MENU.ADMIN' | translate }}</span>
        </a>
        <a mat-menu-item data-automation-id="ama-user-menu-docs" (click)="navigateToDocs()">
            <mat-icon [ngStyle]="{'color': 'var(--theme-document-color)'}">book</mat-icon>
            <span>{{ 'NEW_STUDIO_DASHBOARD.USER_INFO_MENU.DOCUMENTATION' | translate }}</span>
        </a>
    </mat-menu>
</div>
